<template>
    <div class="employee-dashboard">
        <!-- 第一行：员工概况 -->
        <div class="overview-container">
            <h1 class="section-title">員工概況</h1>
            <div class="cards-container">
                <div class="stat-card">
                    <div class="card-icon" style="background-color: #5B8FF9">
                        <el-icon color="white" :size="24">
                            <User />
                        </el-icon>
                    </div>
                    <vue-countup class="card-value" :start-val="0" :end-val="1234" :duration="1" separator="," />
                    <div class="card-label">在職員工</div>
                </div>

                <div class="stat-card">
                    <div class="card-icon" style="background-color: #5BD8A6">
                        <el-icon color="white" :size="24">
                            <User />
                        </el-icon>
                    </div>
                    <vue-countup class="card-value" :start-val="0" :end-val="56" :duration="1" separator="," />
                    <div class="card-label">待入職員工</div>
                </div>

                <div class="stat-card">
                    <div class="card-icon" style="background-color: #F6BD16">
                        <el-icon color="white" :size="24">
                            <User />
                        </el-icon>
                    </div>
                    <vue-countup class="card-value" :start-val="0" :end-val="78" :duration="1" separator="," />
                    <div class="card-label">試用期員工</div>
                </div>

                <div class="stat-card">
                    <div class="card-icon" style="background-color: #6C8EBF">
                        <el-icon color="white" :size="24">
                            <User />
                        </el-icon>
                    </div>
                    <vue-countup class="card-value" :start-val="0" :end-val="1100" :duration="1" separator="," />
                    <div class="card-label">正式員工</div>
                </div>

                <div class="stat-card">
                    <div class="card-icon" style="background-color: #A17ADE">
                        <el-icon color="white" :size="24">
                            <User />
                        </el-icon>
                    </div>
                    <vue-countup class="card-value" :start-val="0" :end-val="89" :duration="1" separator="," />
                    <div class="card-label">待離職員工</div>
                </div>

                <div class="stat-card">
                    <div class="card-icon" style="background-color: #E8684A">
                        <el-icon color="white" :size="24">
                            <User />
                        </el-icon>
                    </div>
                    <vue-countup class="card-value" :start-val="0" :end-val="345" :duration="1" separator="," />
                    <div class="card-label">已離職員工</div>
                </div>
            </div>
        </div>

        <!-- 第二行：快捷入口、日程待办、审批概况 -->
        <div class="second-row-container">
            <!-- 快捷入口 -->
            <div class="quick-access-container">
                <div class="flex-between">
                    <h1 class="section-title">快捷入口</h1>
                </div>
                <div class="grid-container">
                    <div class="grid-item" v-for="(item, index) in quickAccessItems" :key="index"
                        @click="handleQuickAccess(item)">
                        <div class="grid-icon" :style="{ backgroundColor: item.color }">
                            <el-icon color="white" :size="20">
                                <component :is="item.icon" />
                            </el-icon>
                        </div>
                        <div class="grid-label">{{ item.label }}</div>
                    </div>
                </div>
            </div>

            <!-- 日程待办 -->
            <div class="schedule-container">
                <div class="flex-between">
                    <h1 class="section-title">日程待辦</h1>
                    <div class="more-title">
                        <span>全部日程</span>
                        <el-icon>
                            <ArrowRight />
                        </el-icon>
                    </div>
                </div>
                <div class="calendar-wrapper">
                    <div class="calendar-header">
                        <el-button text @click="prevMonth">
                            <el-icon>
                                <ArrowLeft />
                            </el-icon>
                        </el-button>
                        <div class="calendar-title">{{ currentMonth }}</div>
                        <el-button text @click="nextMonth">
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </el-button>
                        <div class="today-btn" @click="goToday">今天</div>
                    </div>
                    <el-calendar v-model="calendarDate" style="--el-calendar-border: none;">
                        <template #date-cell="{ data }">
                            <p :class="data.isSelected ? 'is-selected' : ''">
                                {{ data.day.split('-')[2] }}
                                <span v-if="isToday(data.day)" class="today-marker"></span>
                            </p>
                        </template>
                    </el-calendar>
                    <div class="schedule-list">
                        <div class="schedule-item" v-for="(item, index) in scheduleItems" :key="index">
                            <div class="schedule-time">{{ item.time }}</div>
                            <div class="schedule-content">
                                <div class="schedule-title">{{ item.title }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 审批概况 -->
            <div class="approval-container">
                <div class="flex-between">
                    <h1 class="section-title">審批概況</h1>
                    <div class="more-title">
                        <span>全部審批</span>
                        <el-icon>
                            <ArrowRight />
                        </el-icon>
                    </div>
                </div>
                <div class="approval-content">
                    <div class="approval-item" v-for="(item, index) in approvalItems" :key="index"
                        @click="handleApproval(item)">
                        <div class="approval-icon" :style="{ backgroundColor: item.color }">
                            <el-icon color="white" :size="20">
                                <component :is="item.icon" />
                            </el-icon>
                        </div>
                        <div class="approval-info">
                            <div class="approval-label">{{ item.label }}</div>
                            <vue-countup class="approval-value" :start-val="0" :end-val="item.value" :duration="1"
                                separator="," />
                        </div>
                    </div>
                </div>
                <div ref="chartRef" style="width: 100%; height: 23rem;"></div>
            </div>
        </div>

        <!-- 第三行：資產、招聘、績效考核、人事、今日考勤 -->
        <div class="third-row-container">
            <!-- 資產 -->
            <div class="asset-container">
                <div class="flex-between">
                    <h1 class="section-title">資產</h1>
                    <div class="more-title">
                        <span>全部資產</span>
                        <el-icon>
                            <ArrowRight />
                        </el-icon>
                    </div>
                </div>
                <div class="asset-grid">
                    <div class="asset-item" v-for="(item, index) in assetItems" :key="index">
                        <vue-countup class="asset-value" :start-val="0" :end-val="item.value" :duration="1"
                            separator="," />
                        <div class="asset-label">{{ item.label }}</div>
                    </div>
                </div>
            </div>

            <!-- 招聘和績效考核 -->
            <div class="recruit-performance-container">
                <!-- 招聘 -->
                <div class="recruit-section">
                    <div class="flex-between">
                        <h1 class="section-title">招聘</h1>
                        <div class="more-title">
                            <span>全部招聘</span>
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </div>
                    </div>
                    <div class="recruit-grid">
                        <div class="recruit-item" v-for="(item, index) in recruitItems" :key="index">
                            <div class="flex">
                                <vue-countup class="recruit-value" :start-val="0" :end-val="item.value" :duration="1"
                                    separator="," /><span class="person">
                                    人
                                </span>
                            </div>
                            <div class="recruit-label">{{ item.label }}</div>
                        </div>
                    </div>
                </div>

                <!-- 績效考核 -->
                <div class="performance-section">
                    <div class="flex-between">
                        <h1 class="section-title">績效考核</h1>
                        <div class="more-title">
                            <span>全部考核</span>
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </div>
                    </div>
                    <div class="performance-grid">
                        <div class="performance-item" v-for="(item, index) in performanceItems" :key="index">
                            <div class="flex">
                                <vue-countup class="performance-value" :start-val="0" :end-val="item.value"
                                    :duration="1" separator="," /><span class="person">
                                    個
                                </span>
                            </div>
                            <div class="performance-label">{{ item.label }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 人事和今日考勤 -->
            <div class="hr-attendance-container">
                <!-- 人事 -->
                <div class="hr-section">
                    <div class="flex-between">
                        <h1 class="section-title">人事</h1>
                        <div class="more-title">
                            <span>全部人事</span>
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </div>
                    </div>
                    <div class="hr-grid">
                        <div class="hr-item" v-for="(item, index) in hrItems" :key="index">
                            <div class="flex"><vue-countup class="hr-value" :start-val="0" :end-val="item.value"
                                    :duration="1" separator="," />
                                <span class="person">
                                    人
                                </span>
                            </div>
                            <div class="hr-label">{{ item.label }}</div>
                        </div>
                    </div>
                </div>

                <!-- 今日考勤 -->
                <div class="attendance-section">
                    <div class="flex-between">
                        <h1 class="section-title">今日考勤</h1>
                        <div class="more-title">
                            <span>考勤記錄</span>
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </div>
                    </div>
                    <div class="attendance-grid">
                        <div class="attendance-item" v-for="(item, index) in attendanceItems" :key="index">
                            <div class="flex"> <vue-countup class="attendance-value" :start-val="0"
                                    :end-val="item.value" :duration="1" separator="," /><span class="person">
                                    人
                                </span></div>
                            <div class="attendance-label">{{ item.label }}</div>
                        </div>
                        <div class="attendance-right">
                            <div class="attendance-item-value">
                                <div>遲到：</div>
                                <div class="flex"> <vue-countup class="attendance-value" :start-val="0" :end-val="3"
                                        :duration="1" separator="," /><span>
                                        人
                                    </span></div>
                            </div>
                            <div class="attendance-item-value">
                                <div>早退：</div>
                                <div class="flex"> <vue-countup class="attendance-value" :start-val="0" :end-val="3"
                                        :duration="1" separator="," /><span>
                                        人
                                    </span></div>
                            </div>
                            <div class="attendance-item-value">
                                <div>缺卡：</div>
                                <div class="flex"> <vue-countup class="attendance-value" :start-val="0" :end-val="3"
                                        :duration="1" separator="," /><span>
                                        人
                                    </span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import VueCountup from 'vue-countup-v3';
import * as echarts from 'echarts';

// 定义响应式数据
const calendarDate = ref(new Date());
const quickAccessItems = ref([
    { label: '新增員工', icon: 'Plus', color: '#5B8FF9' },
    { label: '打卡記錄', icon: 'Timer', color: '#5BD8A6' },
    { label: '審批', icon: 'Notebook', color: '#F6BD16' },
    { label: '社保公積金', icon: 'Files', color: '#E8684A' },
    { label: '候選人', icon: 'User', color: '#A17ADE' },
    { label: '會議室預定', icon: 'OfficeBuilding', color: '#F6903D' },
    { label: '用車記錄', icon: 'Van', color: '#3AA0FF' },
    { label: '工資條', icon: 'Document', color: '#4D7CFF' },
    { label: '公共', icon: 'Collection', color: '#975FE5' },
    { label: '文檔庫', icon: 'DocumentCopy', color: '#36CBCB' },
    { label: '新聞', icon: 'Collection', color: '#8E77ED' },
    { label: '資產', icon: 'Box', color: '#5FCABB' },
    { label: '績效', icon: 'Medal', color: '#4ECB73' },
    { label: '考勤設備', icon: 'Monitor', color: '#F6C022' }
]);
const approvalItems = ref([
    { label: '全部審批', icon: 'Document', color: '#6C8EBF', value: 12 },
    { label: '審批中', icon: 'Document', color: '#82B366', value: 56 },
    { label: '已完成', icon: 'Document', color: '#5B8FF9', value: 23 },
    { label: '已撤銷', icon: 'Document', color: '#D6B656', value: 8 }
]);
const chartRef = ref(null);
// 日程消息
const scheduleItems = ref([
    { time: '09:30', title: '部門周會' },
    { time: '14:00', title: '客戶項目討論' }
]);

const assetItems = ref([
    { label: '全部資產', value: 1234 },
    { label: '新增採購單', value: 56 },
    { label: '待入庫資產', value: 78 },
    { label: '新增盤點', value: 23 },
    { label: '新增資產領用', value: 45 },
    { label: '新增資產退庫', value: 12 },
    { label: '新增資產借用', value: 34 },
    { label: '新增資產歸還', value: 67 },
    { label: '新增資產調撥', value: 89 }
]);

const recruitItems = ref([
    { label: '新增候選人', value: 56 },
    { label: '初篩選', value: 34 },
    { label: '待面試', value: 23 }
]);

const performanceItems = ref([
    { label: '未開始考核計劃', value: 12 },
    { label: '進行中考核計劃', value: 45 },
    { label: '已完成考核計劃', value: 78 }
]);

const hrItems = ref([
    { label: '待入職', value: 23 },
    { label: '待轉正', value: 45 },
    { label: '待離職', value: 12 }
]);

const attendanceItems = ref([
    { label: '正常打卡', value: 890 },
    { label: '異常打卡', value: 34 }
]);

const currentMonth = computed(() => {
    const date = new Date(calendarDate.value);
    return `${date.getFullYear()}年${date.getMonth() + 1}月`;
});

// 在组件挂载后初始化 ECharts 图表
onMounted(() => {
    const chart = echarts.init(chartRef.value);
    const option = {
        title: {
            text: '各類型審批數量',
            left: 'left',
            textStyle: {
                fontSize: 14,
                fontWeight: '400',
            },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['入职', '转正', '离职', '调薪', '请假', '调岗', '外出', '加班', '补卡', '领用', '退库', '借用', '归还', '调拨'],
            axisLabel: {
                interval: 0, // 强制显示所有标签
                rotate: 0, // 标签旋转角度
                fontSize: 10 // 字体大小
            }
        },
        yAxis: {
            type: 'value',
            name: '数量',
            nameTextStyle: {
                padding: [0, 0, 0, 30] // 调整名称位置
            }
        },
        series: [{
            name: '审批数量',
            data: [120, 200, 150, 80, 70, 60, 50, 40, 30, 20, 15, 10, 5, 2], // 示例数据
            type: 'bar',
            itemStyle: {
                color: '#3dd4a7'
            },
            barWidth: '60%', // 调整柱状图宽度
            label: {
                show: true,
                position: 'top',
                formatter: '{c}'
            }
        }]
    };
    chart.setOption(option);

    // 响应式调整
    window.addEventListener('resize', function () {
        chart.resize();
    });
});

// 定义方法
const isToday = (dateStr) => {
    const today = new Date();
    const date = new Date(dateStr);
    return date.getDate() === today.getDate() &&
        date.getMonth() === today.getMonth() &&
        date.getFullYear() === today.getFullYear();
};

const handleQuickAccess = (item) => {
    console.log('快捷入口点击:', item.label);
    // 这里可以添加跳转逻辑
};

const handleApproval = (item) => {
    console.log('审批概况点击:', item.label);
    // 这里可以添加跳转逻辑
};

// 日曆導航功能
const prevMonth = () => {
    const date = new Date(calendarDate.value);
    date.setMonth(date.getMonth() - 1);
    calendarDate.value = date;
};

const nextMonth = () => {
    const date = new Date(calendarDate.value);
    date.setMonth(date.getMonth() + 1);
    calendarDate.value = date;
};

const goToday = () => {
    calendarDate.value = new Date();
};

</script>

<style scoped lang="less">
.section-title {
    color: rgba(0, 0, 0, 0.85);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: center;

    .person {
        padding-left: 0.5rem;
        font-size: 1rem;
    }
}

.more-title {
    span {
        padding-right: 0.5rem;
    }

    cursor: pointer;
    font-size: 0.85rem;
    color: gray;
    display: flex;
    align-items: center;
    transition: .2s;
}

.more-title:hover {
    transform: translateX(-0.2rem);
    transition: .1s;
    color: #1890FF;
}

.employee-dashboard {
    .overview-container {
        background-color: white;
        border-radius: 0.5rem;
        padding: 1.5rem;
        box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);

        .cards-container {
            margin-top: 2rem;
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;

            .stat-card {
                flex: 1;
                min-width: 9.375rem;
                border-radius: 0.5rem;
                padding: 1.25rem;
                text-align: center;
                position: relative;
                box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

                .card-icon {
                    top: -1rem;
                    width: 3rem;
                    height: 3rem;
                    border-radius: 0.75rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0 auto 0.75rem;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                }

                .card-value {
                    padding-top: 1.5rem;
                    font-size: 1.5rem;
                    font-weight: 600;
                    color: rgba(0, 0, 0, 0.85);
                    margin-bottom: 0.5rem;
                    min-height: 2rem;
                }

                .card-label {
                    font-size: 0.875rem;
                    color: rgba(0, 0, 0, 0.65);
                }
            }
        }
    }

    .second-row-container {
        display: flex;
        gap: 1rem;
        margin-top: 1.5rem;
        height: 33rem;

        .quick-access-container,
        .schedule-container,
        .approval-container {
            background-color: white;
            border-radius: 0.5rem;
            padding: 1.5rem;
            box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
        }

        .quick-access-container {
            flex: 1;

            .grid-container {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 1rem;

                .grid-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 1rem 0;
                    cursor: pointer;
                    transition: all 0.3s;
                    border-radius: 0.5rem;

                    &:hover {
                        background-color: #f5f5f5;
                        transform: translateY(-2px);
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                    }

                    .grid-icon {
                        width: 2.5rem;
                        height: 2.5rem;
                        border-radius: 0.5rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 0.5rem;
                    }

                    .grid-label {
                        font-size: 0.75rem;
                        color: rgba(0, 0, 0, 0.65);
                        text-align: center;
                    }
                }
            }
        }

        .schedule-container {
            flex: 1;

            .calendar-wrapper {
                position: relative;
                height: 100%;

                .calendar-header {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.5rem;

                    .calendar-title {
                        font-size: 1rem;
                        font-weight: 500;
                    }

                    .today-btn {
                        margin-left: auto;
                        color: #333;
                        padding: 0.25rem 1rem;
                        font-size: 0.75rem;
                        border-radius: 0.25rem;
                        cursor: pointer;
                        border: 0.1rem #f0f0f0 solid;
                        transition: .2s;
                    }

                    .today-btn:hover {
                        background-color: #1890FF;
                        color: #fff;
                        transition: .2s;
                    }

                    .el-button {
                        padding: 0.5rem;
                        border-radius: 50%;
                        width: 2rem;
                        height: 2rem;
                    }
                }

                :deep(.el-calendar__header) {
                    display: none;
                }

                :deep(.el-calendar__body) {
                    padding: 0;
                    padding-bottom: 1rem;
                }

                :deep(.el-calendar-day) {
                    height: 3rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .today-marker {
                    display: block;
                    width: 0.35rem;
                    height: 0.35rem;
                    background-color: #fa746b;
                    border-radius: 50%;
                    margin: 0.2rem auto 0;
                }

                .is-selected {
                    color: #1890FF;
                    font-weight: bold;
                }

                .schedule-list {
                    width: 100%;
                    border-top: 1px solid #f0f0f0;
                    padding-top: 0.45rem;

                    .schedule-item {
                        display: flex;
                        padding: 0.45rem 0;
                        padding-left: 2rem;
                        position: relative;
                        align-items: center;

                        .schedule-time {
                            width: 3rem;
                            font-size: 0.875rem;
                            color: rgba(0, 0, 0, 0.65);
                        }

                        .schedule-content {
                            flex: 1;

                            .schedule-title {
                                font-size: 0.875rem;
                                color: rgba(0, 0, 0, 0.85);
                            }

                            .schedule-location {
                                font-size: 0.75rem;
                                color: rgba(0, 0, 0, 0.45);
                            }
                        }

                        &:first-child,
                        &:last-child {
                            &::before {
                                content: "";
                                width: 0.75rem;
                                height: 0.75rem;
                                position: absolute;
                                left: 2%;
                                top: 50%;
                                transform: translateY(-50%);
                                border-radius: 0.2rem;
                            }

                            &::after {
                                content: "";
                                width: 0.35rem;
                                height: 0.35rem;
                                position: absolute;
                                right: 2%;
                                top: 50%;
                                transform: translateY(-50%);
                                border-radius: 1rem;
                                background-color: #fa746b;
                            }
                        }

                        &:first-child::before {
                            background-color: #3dd4a7;
                        }

                        &:last-child::before {
                            background-color: #fa746b;
                        }
                    }

                }
            }
        }

        .approval-container {
            flex: 2;

            .approval-content {
                display: flex;
                // flex-direction: column;
                justify-content: space-between;
                gap: 1rem;

                .approval-item {
                    display: flex;
                    align-items: center;
                    padding: 0.75rem;
                    border-radius: 0.5rem;
                    cursor: pointer;
                    transition: all 0.3s;

                    &:hover {
                        background-color: #f5f5f5;
                        transform: translateX(5px);
                    }

                    .approval-icon {
                        width: 2.5rem;
                        height: 2.5rem;
                        border-radius: 0.5rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-right: 1rem;
                    }

                    .approval-info {
                        flex: 1;

                        .approval-label {
                            font-size: 0.875rem;
                            color: rgba(0, 0, 0, 0.65);
                            margin-bottom: 0.25rem;
                        }

                        .approval-value {
                            font-size: 1.25rem;
                            font-weight: 600;
                            color: rgba(0, 0, 0, 0.85);
                        }
                    }
                }
            }
        }
    }

    .third-row-container {
        display: flex;
        gap: 1rem;
        margin-top: 1.5rem;

        .asset-container {
            background-color: white;
            border-radius: 0.5rem;
            padding: 1.5rem;
            box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);

            .asset-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 1rem;
                margin-top: 1rem;

                .asset-item {
                    text-align: center;
                    padding: 1rem;
                    border-radius: 0.5rem;

                    .asset-value {
                        font-size: 1.5rem;
                        font-weight: 600;
                        color: rgba(0, 0, 0, 0.85);
                    }

                    .asset-label {
                        font-size: 0.875rem;
                        color: rgba(0, 0, 0, 0.65);
                        margin-top: 0.5rem;
                    }
                }
            }
        }

        .recruit-performance-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .recruit-section,
            .performance-section {
                flex: 1;
                background-color: white;
                border-radius: 0.5rem;
                padding: 1.5rem;
                box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);

                .recruit-grid,
                .performance-grid {
                    display: flex;
                    justify-content: space-between;
                    // grid-template-columns: repeat(1, 1fr);
                    // gap: 1rem;
                    margin-top: 1rem;

                    .recruit-item,
                    .performance-item {
                        text-align: center;
                        padding: 1rem;
                        width: 7rem;
                        border-radius: 0.5rem;

                        .recruit-value,
                        .performance-value {
                            font-size: 1.5rem;
                            font-weight: 600;
                            color: rgba(0, 0, 0, 0.85);
                        }

                        .recruit-label,
                        .performance-label {
                            font-size: 0.875rem;
                            color: rgba(0, 0, 0, 0.65);
                            margin-top: 0.5rem;
                        }
                    }
                }
            }
        }

        .hr-attendance-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .hr-section,
            .attendance-section {
                flex: 1;
                background-color: white;
                border-radius: 0.5rem;
                padding: 1.5rem;
                box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);

                .hr-grid,
                .attendance-grid {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 1rem;

                    .attendance-right {
                        flex: 2;
                        border-left: 0.1rem solid #e2e2e2;
                        padding-left: 3rem;
                        justify-items: end;

                        .attendance-item-value {
                            width: 100%;
                            padding: 0.25rem 0;
                            font-size: 0.8rem;
                            color: #333;
                            display: flex;
                            justify-content: space-between;
                        }
                    }

                    .hr-item,
                    .attendance-item {
                        text-align: center;
                        padding: 1rem;
                        border-radius: 0.5rem;
                        width: 7rem;

                        .hr-value,
                        .attendance-value {
                            font-size: 1.5rem;
                            font-weight: 600;
                            color: rgba(0, 0, 0, 0.85);
                        }

                        .hr-label,
                        .attendance-label {
                            font-size: 0.875rem;
                            color: rgba(0, 0, 0, 0.65);
                            margin-top: 0.5rem;
                        }
                    }
                }
            }
        }
    }
}
</style>